<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Title</title>
    <link rel="stylesheet" href="../css/bootstrap.min.css">
    <link rel="stylesheet" href="../animate/animate.css">

    <style type="text/css">

        @media(max-width: 768px) {
             #root .main>.left{
                overflow: hidden;
                margin-left: -150px;
                width: 0;
                transition: all .5s linear;
            }
            #root .main>.right{
                width: 100%!important;
            }
            #root .header{
                height: 60px!important;
            }

            #caiDanXianShi{
                display: block!important;
            }
            #header_title{
                display: none !important;
            }
        }
        @media(max-width: 986px){
            #root .main>.left{
                width: 150px;
            }

        }
        @media(max-width: 1170px){
            #root .main>.left{
                width: 150px;
            }
        }


        *{
            margin: 0;
            padding: 0;
        }
        html,.body,#root{
            height: 100%;
            overflow-y: auto;
        }
        .main{
            overflow: hidden;
            height: 100%;
        }
        #root .main>.left{
            overflow-y: auto;
            overflow-x: hidden;
            height: 100%;
            width: 150px;
            background-color: #446268;
            transition: all .5s linear;
            padding: 0;
            float: left;
        }
       #root .main>.right{
            height: 100%;
            width: calc(100% - 150px);
            overflow-y: auto;
            overflow-x: hidden;
            float: left;
            padding: 0;
            transition: all .5s linear;
        }

        .row{
            margin-left: 0;
            margin-right: 0;
        }

        .core{
            overflow-y: auto;
            overflow-x: hidden;
            height: 100%;
        }
        .core .header{
            text-align: center;
            height: 60px;
            background-color: #fdf9ed;
        }
        /*.core .bottom{*/
        /*    height: 40px;*/
        /*    background-color: #cccccc;*/
        /*    text-align: center;*/
        /*}*/




        /*左侧导航*/
        #left_nav{
            overflow-y: auto;
            overflow-x: hidden;
            height: 100%;
            background-color: #446268;
        }
        #left_nav_ul{
            height: 100%;
            text-align: left;

        }
        #left_nav_ul>li{
            font-weight: 600;
        }
        #left_nav_ul>li ul li:hover{
            background-color: #78a3b1;
            color: black;
        }
        #left_nav_ul>li ul li{
            color: #eeeeee;
            margin-right: 10px;
            padding-left: 25px;
            font-weight: 500;
        }
        #left_nav_ul li{
            color: white;
            padding-top: 5px;
            padding-bottom: 5px;
            padding-left: 10px;
            white-space:nowrap;
            overflow-x: hidden;
            text-overflow:ellipsis;
        }
        #left_nav_ul li span{
            margin-right: 5px;
        }




        /*设置二级导航高度*/
        #left_nav_ul ul{
            padding-top: 5px;
        }

        /*设置右侧导航样式*/
        .header{
            position: relative;
            overflow: hidden;
        }
        #break{
            float: right;
            margin-right: 20px;
            color: #446268;
            font-size: 15px;
            margin-top: 17px;
        }
        /*大标题*/
        #header_title{
            position: absolute;
            display: block;
            font-size: 20px;
            color: #446268;
            top: 10px;
            left: calc(50% - 100px);
        }

        .component{
            height: calc(100% - 60px);
            overflow-y: auto;
            overflow-x: auto;
        }

        /*滚动条样式*/
        .component::-webkit-scrollbar {
            width: 10px;
            /*height: 4px;*/
        }
        #left_nav::-webkit-scrollbar {
            width: 0px;
            /*height: 4px;*/
        }
        /*.left::-webkit-scrollbar-thumb {*/
        /*    border-radius: 10px;*/
        /*    -webkit-box-shadow: inset 0 0 5px rgba(0,0,0,0.2);*/
        /*    background: rgba(0,0,0,0.2);*/
        /*}*/
        /*.left::-webkit-scrollbar-track {*/
        /*    -webkit-box-shadow: inset 0 0 5px rgba(0,0,0,0.2);*/
        /*    border-radius: 0;*/
        /*    background: rgba(0,0,0,0.1);*/

        /*}*/
/*左侧导航栏人物信息*/
        #nav_people_message{
            height: 60px;
            background-color: #78a3b1;
        }
        .active{
            background-color:#fdf9ed;
            color:#446268;
        }
        #left_nav_ul>li{
            padding-right: 10px;
        }
        #left_nav_ul>li>div{
            padding: 5px;
        }
        /*右侧导航条div样式*/
        /*菜单显示*/
        #caiDanXianShi{
            position: absolute;
            left: 20px;
            top: 15px;
            width: 30px;
            height: 30px;
            border-radius: 5px;
            border: 2px solid #446268;
            line-height: 5px;
        }
        #caiDanXianShi .tiao{
            display: inline-block;
            background-color: #446268;
            width: 20px;
            height: 2px;
            margin: auto;
        }

        /*左侧导航头像等*/
        #touXiang{

            width: 30px;
            height: 30px;
            border-radius: 30px;
            background-color: #446268;
            margin-top: 10px;
            margin-left: 20px;
        }
        #user_name{
            position: absolute;
            right: 30px;
            top: 22px;
        }
        #nav_people_message{
            position: relative;
        }

        #left_nav_ul li{
            display: none;
        }
        #left_nav_ul li:nth-child(1){
            display: block;
        }
        #left_nav_ul li:nth-child(2){
            display: block;
        }
        #left_nav_ul li:nth-child(3){
            display: block;
        }
        /*头像*/
        #touXiang{
            background-image: url("../images/touXiang.jpg");
            background-position: center center;
            background-size: 100% 100%;
        }
    </style>
</head>
<body class="body">
<script src="https://ajax.aspnetcdn.com/ajax/jquery/jquery-3.5.1.min.js"></script>
<!--大框-->
    <div id="root">
        <div class="main">
            <!--左侧导航-->
            <div class="left">
                <nav class="" id="left_nav">
                    <ul id="left_nav_ul">
                        <li id="nav_people_message">
                            <div id="touXiang"><div id="user_name"><span id="user_name_span">饶鹏</span></div></div>
                        </li>
                        <li id="nav_li0"><div class="active"><span class="glyphicon glyphicon-home"></span>主页</div></li>
                        <li id="nav_li1">
                            <div class="nav_li1"><span class="glyphicon glyphicon-cog"></span>账户管理</div>
                            <ul id="nav_li1_ul" class="">
                                <li id="nav_li1_ul_admin">管理员信息</li>
                                <li id="nav_li1_ul_user">用户账户</li>
                            </ul>
                        </li>
                        <li id="nav_li2">
                            <div class="nav_li2"><span class="glyphicon glyphicon-list-alt"></span>资料管理</div>
                            <ul id="nav_li2_ul" class="">
                                <li id="yuanGong">员工管理</li>
                                <li id="buMen">部门管理</li>
                                <li id="zhiWei">职位管理</li>
                            </ul>
                        </li>
                        <li id="nav_li3">
                            <div class="nav_li3"><span class="glyphicon glyphicon-briefcase"></span>学校管理</div>
                            <ul id="nav_li3_ul" class="">
                                <li id="huoDong">学校活动</li>
                                <li id="xueXiaoGl">学校管理</li>
                            </ul>
                        </li>
                        <li id="nav_li4">
                            <div class="nav_li4"><span class="glyphicon glyphicon-user"></span>用户管理</div>
                            <ul id="nav_li4_ul" class="">
                                <li id="xueShengGl">学生管理</li>
                                <li id="banJiGl">班级管理</li>
                            </ul>
                        </li>
                        <li id="nav_li5">
                            <div class="nav_li5"><span class="glyphicon glyphicon-equalizer"></span>统计信息</div>
                            <ul id="nav_li5_ul" class="">
                                <li id="dQTj">地区统计</li>
                                <li id="xXTj">学校统计</li>
                            </ul>
                        </li>
                    </ul>
                </nav>
            </div>

            <!--右边-->
            <div class="right">
                <div class="core">
                    <div class="header">
                        <div id="caiDanXianShi">
                            <span class="tiao"></span>
                            <span class="tiao"></span>
                            <span class="tiao"></span>
                        </div>
                        <div id="header_title">四川网脉后台管理系统</div>
                        <div id="break"><span class="glyphicon glyphicon-record"></span>注销</div>
                    </div>
                    <!--内容-->
                    <div class="component flex-grow-1 flex-row">

                    </div>
                </div>
            </div>
        </div>

    </div>

<script src="../js/bootstrap.min.js"></script>
<script src="../js/guliData.js"></script>



<script type="text/javascript">
var clicktime=1;
        //网页刷新后关闭所有子导航
        $(document).ready(function(){
            $("#left_nav_ul>li>ul").hide();
            $(".component").load("index.html")
        });

        /*点击其他导航条后显示当前子导航隐藏其他导航*/
        $("#left_nav_ul>li>div").click(function(){
            $("#left_nav_ul>li>div").removeClass("active");
            if (clicktime==1) {
                $(this).nextAll().slideDown().end().parent().siblings().children("ul").hide();
                clicktime++;
                $(this).addClass("active")
            }else if(clicktime==2){
                $(this).parent().children("ul").hide();
                $(this).removeClass("active")
                clicktime=1;
            }
        });


        $("#nav_li0 div").click(function () {
            $(".component").load("index.html");
        })
        $("#nav_li1_ul_admin").click(function () {
            $(".component").load("login.html");
        })
        $("#nav_li1_ul_user").click(function () {
            $(".component").load("adminUser.html");
        })
        $("#yuanGong").click(function () {
            $(".component").load("login.html");
        })
        $("#buMen").click(function () {
            $(".component").load("login.html");
        })
        $("#zhiWei").click(function () {
            $(".component").load("login.html");
        })
        $("#huoDong").click(function () {
            $(".component").load("login.html");
        })
        $("#xueXiaoGl").click(function () {
            $(".component").load("school.html");
        })
        $("#xueShengGl").click(function () {
            $(".component").load('studentmanage.html');
        })
        $("#banJiGl").click(function () {
            $(".component").load("login.html");
        })
        $("#dQTj").click(function () {
            $(".component").load("login.html");
        })
        $("#xXTj").click(function () {
            $(".component").load("login.html");
        })


    var caidanTime=1;
    /*点击菜单显示*/
    $("#caiDanXianShi").click(function () {
        if (caidanTime==1){
            $("#root .main>.left").width("");
            $('#root .main>.right').width("");
            caidanTime++;
        }else {
            $("#root .main>.left").css('width','0px');
            $('#root .main>.right').width("100%");
            caidanTime=1;
        }
    })

    /*退出登录*/
    $("#break").click(function () {
        $(window).attr('location','login.html');
    })

/*登录权限管理与账户关联*/
$(document).ready(quanXianGuanLi);
    /*从localStorage中获取账号信息*/
    function quanXianGuanLi() {
        var account = localStorage.account;
        for (var i=0;i<staffDate.length;i++){
            if (account==staffDate[i].account){
                var quanXian = staffDate[i].autMgt
                $("#user_name_span").text(staffDate[i].name)
                console.log(quanXian);
                for (var j=0;j<quanXian.length;j++) {
                    console.log(quanXian[j]);
                    if (quanXian[j] == "A") {
                        $("#nav_li5").css("display", "block")
                    } else if (quanXian[j] == "B") {
                        $("#nav_li4").css("display", "block")
                    } else if (quanXian[j] == "C") {
                        $("#nav_li3").css("display", "block")
                    } else if (quanXian[j] == "D") {
                        $("#nav_li2").css("display", "block")
                    } else if (quanXian[j] == "E") {
                        $("#nav_li1").css("display", "block")
                    } else if (quanXian[j] == "F") {
                        // $("#nav_li5").css("display", "block")
                    }
                }
                break;
            }

        }
    }


// var rightWidthTime;
// rightWidthTime=setInterval(rightWidth,0);
//
// function rightWidth(){
//     if ($(".right").width()){
//         $(".right").width($('.main').width() - $('.left').width());
//     }
// }
</script>
</body>
</html>